<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
<template>
  <div>
    <el-row>
      <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
        <span style="font-size: 14px;color: #747778">婚姻信息</span>
      </el-col>
      <el-col :offset="18" :span="2" align="right">
        <el-button v-show="canEdit && editable" size="small" @click="edit()" plain>编辑</el-button>
      </el-col>
    </el-row>
    <transition name="el-zoom-in-top">
      <el-form :model="formData"
               ref="formDataa"
               :rules="rules"
               style="text-align: left;padding-top: 12px"
               :class="{cardBackColor:!canEdit}" inline>
        <el-row style="padding-left: 12px;padding-right: 12px;padding-bottom: 24px">
          <el-col :md="8" :lg="6">
            <el-form-item label="配偶姓名" prop="memberName">
              <ft-input :editable="!canEdit"
                        v-model="formData.memberName"
                        class="input"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="证件类型" prop="memberIdentityType">
              <ft-enum-select type="data"
                              v-model="formData.memberIdentityType"
                              service-name="lss-customer"
                              type-name="personalType"
                              placeholder="请选择"
                              :editing="!canEdit">
              </ft-enum-select>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="证件号码" prop="memberIdentityNo">
              <ft-input :editable="!canEdit"
                        v-model="formData.memberIdentityNo"
                        class="input"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="配偶电话" prop="memberCompanyTel">
              <ft-input :editable="!canEdit"
                        v-model="formData.memberCompanyTel"
                        class="input"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="配偶单位" prop="memberCompany">
              <ft-input :editable="!canEdit"
                        v-model="formData.memberCompany"
                        class="input"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-col>
        </el-row>
        <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>
        <el-row>
          <el-col align="right" v-show="!canEdit">
            <el-button size="mini"
                       @click="handleCancel(formData)">取消
            </el-button>
            <el-button size="mini"
                       type="primary"
                       @click="handleSave(formData)"
                       style="margin-left: 24px;margin-right: 36px">保存
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "MarriageInfo",
    props: {
      customerId: {
        type : String,
        default : '',
      },
      editable: {
        type : Boolean,
        default : true,
      },
    },
    data() {
      return {
        custMember: {},
        personInfoBack:{},
        outTime:0,
        disabled:true,
        formData: {
          customerId: this.customerId,
          memberName:'',
          memberIdentityNo:'',
          memberIdentityType: 'IDENTITY_CARD',
          memberCompanyTel:'',
          memberCompany:''
        },
        canEdit: true,
        rules:{
          memberName:[
            {max: 30, message: '输入字符不得超过30字', trigger: 'blur'}],
          memberIdentityNo:[
            {max: 20, message: '输入字符不得超过20字', trigger: 'blur'}],
          memberCompanyTel:[
            {max: 25, message: '输入字符不得超过25字', trigger: 'blur'}],
          memberCompany:[
            {max: 80, message: '输入字符不得超过80字', trigger: 'blur'}]
        }
      }
    },
    mounted(){
      this.load()
    },
    methods: {
      load() {
        this.$http.get('/joys-rest/lss-customer/member/marriage/'+this.customerId).then(
          resp => {
            if (resp.body == '' || resp.body == null) {
              this.formData = {}
            }else{
              this.formData=resp.body
              //信息框有值就显示
              if (this.formData.memberCompany != '' && this.formData.memberCompany != null) {
                this.disabled = false
              }
              this.$emit("changeMarriage",{showMarriageInfo:true})
            }
          },
          resp => {
            this.$message.error(resp.body)
          })
      },
      //列表取消
      handleCancel() {
        this.formData=this.personInfoBack
        this.canEdit = true
      },
      //保存
      handleSave(formData) {
        const _this = this
        formData.customerId=this.customerId
        formData.relationType='SPOUSE'
        _this.custMember = formData
        this.$refs.formDataa.validate((valid) => {
          if (valid) {
            _this.$http.put('/joys-rest/lss-customer/member/', _this.custMember, {
              params: {
                sourceModule: "婚姻信息",
              }
            }).then(
              resp => {
                _this.formData = resp.body
                this.disabled = true
                //信息框有值就显示
                if (this.formData.memberCompany != '' && this.formData.memberCompany != null) {
                  this.disabled = false
                }
                _this.canEdit = true
                _this.$message.success('保存成功!')
              },
              resp => {
                _this.$message.error(resp.body)
                _this.canEdit = false
              })
          }
          else{
            return false;
          }
        })
      },
      //表单编辑按钮
      edit(){
        this.canEdit = false
        this.personInfoBack = JSON.parse(JSON.stringify(this.formData))
      },

    },
  }
</script>
<style>
</style>
<style scoped>
  .input{
    overflow: auto;
    white-space: normal;
    word-wrap: break-word;
  }
</style>
